<template>
  <div class="notices">
    <PageSearch :formConfig="noticesFormConfig"  />
    <el-alert title="刷新查看最新数据！" type="warning" show-icon />
    <PageContent ref="pageContentRef" v-model:page="page" @pageInfoChange="onPageInfoChange" />
  </div>
</template>

<script setup>
import { ref, provide, watch, nextTick } from 'vue'
import { useStore } from 'vuex'
import { noticesFormConfig } from './config/notices.config'
import PageSearch from './components/PageSearch.vue'
import PageContent from './components/PageContent.vue'

const store = useStore()

const pageContentRef = ref(null)

// 搜索表单的数据
const formValue = ref({
  // 下拉框值默认为“姓名”
  label: 'publisher',
  value: ''
})
// 分页参数
const page = ref({
  page_num: 1,
  page_size: 10
})

// 【发起查询请求】当改变了表单信息，点击查询时触发的事件
const changeFormValue = (data) => {
  formValue.value = data
  pageContentRef.value.getPageList(formValue.value,page.value)
}

provide('formValue', formValue.value)
provide('changeFormValue', changeFormValue)

// 【发起查询请求】页面刷新就触发，当分页的信息发生变化时，触发的事件
const onPageInfoChange = (pageInfo) => {
  // 保存最新的分页参数
  page.value.page_num = pageInfo.page_num
  page.value.page_size = pageInfo.page_size
  nextTick(() => {
    pageContentRef.value.getPageList(formValue.value,pageInfo)
  })
}

</script>

<style lang='less' scoped>
.notices {
  padding: 15px;
}
</style>